import React, {Component} from 'react';
import {Dimensions, Modal, StyleSheet, Text, TouchableOpacity, View,ScrollView} from 'react-native';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../../constant/PHScreen";
import {COLOR_FOCUS, COLOR_GRAY_LINE} from "../../../constant/PHColors";
import Picker from 'react-native-picker';
import PropTypes from 'prop-types';
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";


export default class SelectPlaceTwoWheelPlugIn extends Component {

    static propTypes = {
        closeBack:PropTypes.func,
        dateBack:PropTypes.func,
        defaultPlace:PropTypes.string,
        defaultDate:PropTypes.object,
        textStyle: PropTypes.style,
    };

    constructor(props) {
        super(props);

        this.state = {
            defaultPlace:this.props.defaultPlace?this.props.defaultPlace:'',
            defaultDate:this.props.defaultDate?this.props.defaultDate:{},

            dealPeopleVisible:false, //modal
            chooseGroup:'',//选中的组别
            chooseDealPeople:[],//选中的地点
        };
    }

    render() {
        return (
            <View>
                <TouchableOpacity  onPress={()=>this.showPlacePicker()}>
                    <Text style={this.props.textStyle} numberOfLines={1}>
                        {this.state.defaultPlace}
                    </Text>
                </TouchableOpacity>
                <Modal visible={this.state.dealPeopleVisible} animationType = {'none'} transparent = {true} onRequestClose={()=> this.onRequestClose()}>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                    }}>
                        <View style={styles.modalContainer}>
                            <View style={styles.modalBox} >
                                <View style={styles.modalTitle}>
                                    <View>
                                        <Text style={styles.modalTitleText}>
                                            选择处理人
                                        </Text>
                                    </View>
                                    <View style={styles.modalCheck}>
                                        <Text style={styles.modalCheckText}   onPress={()=>{
                                            let checked = '选择地点';
                                            if(this.state.chooseDealPeople.length>0){
                                                checked = this.state.chooseDealPeople.join(',')
                                            }
                                            this.setState({dealPeopleVisible: false,defaultPlace:checked});
                                            this.props.dateBack(checked);
                                        }}>
                                            确定
                                        </Text>
                                    </View>
                                </View>
                                <View style={styles.modalBody}>
                                    <ScrollView showsVerticalScrollIndicator={false} style={styles.modalBodyLeft}>
                                        {
                                            this._renderRole()
                                        }
                                    </ScrollView>
                                    <ScrollView showsVerticalScrollIndicator={false} style={styles.modalBodyRight}>
                                        {

                                            (this.state.defaultDate[this.state.chooseGroup])
                                            ?
                                            (
                                                this.state.defaultDate[this.state.chooseGroup].map((item, index) => {
                                                    return this._renderDealPeopleArr(item, index)
                                                })
                                            )
                                            :
                                            (
                                                <View>

                                                </View>
                                            )

                                        }
                                    </ScrollView>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>

        );
    }

    //打开日期选择 视图
    showPlacePicker() {
        this.setState({dealPeopleVisible:true})
    }

    onRequestClose(){
        this.setState({
            dealPeopleVisible: false,
        })
    }

    //分组循环
    _renderRole = () => {
        let html_arr = [];

        for (let group in this.state.defaultDate){
            if(this.state.chooseGroup===""){
                this.state.chooseGroup=group
            }
            let html = (
                <TouchableOpacity  activeOpacity={1} onPress={()=>{
                    this.setState({chooseGroup:group})
                }}>
                    {this.leftBoxStyle(group)}
                </TouchableOpacity>
            )
            html_arr.push(html)
        }

        return html_arr
    };

    //判断选中分组
    leftBoxStyle(group){
        if(this.state.chooseGroup===group){
            return(
                <View style={styles.leftBoxChoose}>
                    <Text style={styles.leftText}>
                        {group}
                    </Text>
                </View>
            )
        }else{
            return(
                <View style={styles.leftBox}>
                    <Text style={styles.leftText}>
                        {group}
                    </Text>
                </View>
            )
        }
    };

    //处理人循环
    _renderDealPeopleArr = (item, index) => {
        console.log(JSON.stringify(item))
        return(
            <TouchableOpacity key={index} activeOpacity={1} onPress={()=>{
                let place = item.groupby+"."+item.code
                if(this.state.chooseDealPeople.indexOf(place)>=0){
                    this.state.chooseDealPeople.splice(this.state.chooseDealPeople.indexOf(place),1);
                }else{
                    this.state.chooseDealPeople.push(place);
                }
                this.setState({chooseDealPeople:this.state.chooseDealPeople})
            }}>
                {this.rightBoxStyle(item)}
            </TouchableOpacity>
        )
    };

    rightBoxStyle(item){
        let place = item.groupby+"."+item.code
        if(this.state.chooseDealPeople.indexOf(place)>=0){
            return(
                <View style={styles.rightBox}>
                    <MaterialCommunityIcons name={'radiobox-marked'} size={25} color={'#1f60ff'} />
                    <Text style={styles.rightTextChoose}>
                        {item.code+"层"}
                    </Text>
                </View>
            )
        }else{
            return(
                <View style={styles.rightBox}>
                    <MaterialCommunityIcons name={'radiobox-blank'} size={25} />
                    <Text style={styles.rightText}>
                        {item.code+"层"}
                    </Text>
                </View>
            )
        }
    };

}

const styles = StyleSheet.create({
    textStyle:{
        fontSize:18,
    },

    content:{
        width:'100%',
        flexDirection:'row',
        justifyContent:'space-around'
    },

    textList:{
        flexDirection:'row',
        flex:1,
        marginBottom: 5,
    },

    remark:{
        marginTop:10,
        marginBottom:10,
        marginRight: 20,
        justifyContent: 'center',
        flexDirection:'row'
    },

    dealPeople:{
        fontSize: 20,
        color: '#1f60ff',
    },

    dealPeopleDel:{
        position:'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        right:0,
        top:7,
    },

    containerName:{
        fontSize: 20,
        color: '#999999',
        marginLeft: 15,
        flex: 0.3,
    },

    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },

    modalBox:{
        alignItems:'center',
        height:300,
        backgroundColor:'white',
        width: SCREEN_WIDTH,
        bottom:0,
        position:'absolute',
    },

    modalTitle:{
        borderBottomColor:'#b2b2b2',
        borderBottomWidth:1,
        height:49,
        width:SCREEN_WIDTH,
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'row',
    },

    modalTitleText:{
        fontSize:20,
        color:'black',
    },

    modalCheck:{
        position:'absolute',
        right: 10,
    },

    modalCheckText:{
        fontSize:17,
        color:'#1f60ff',
    },

    modalBody:{
        flexDirection:'row',
        width:SCREEN_WIDTH,
        height:250,
    },

    modalBodyLeft:{
        width:SCREEN_WIDTH*2/5,
        flexDirection:'column',
        backgroundColor:'#e4e4e4',
    },

    modalBodyRight:{
        width:SCREEN_WIDTH*3/5,
        flexDirection:'column',
    },

    leftBox:{
        justifyContent: 'center',
        alignItems: 'center',
        height:40,
        backgroundColor:'#e4e4e4'
    },

    leftBoxChoose:{
        justifyContent: 'center',
        alignItems: 'center',
        height:40,
        backgroundColor:'#ffffff'
    },

    leftText:{
        fontSize:17,
        color:'black',
    },

    rightBox:{
        alignItems: 'flex-start',
        backgroundColor:'#ffffff',
        minHeight: 40,
        marginLeft:30,
        paddingTop:10,
        flexDirection:'row',
    },

    rightBoxChoose:{
        alignItems: 'flex-start',
        backgroundColor:'#ffffff',
        minHeight: 40,
        marginLeft:30,
        paddingTop:15,
        flexDirection:'row',
    },

    rightText:{
        fontSize:17,
        color:'black',
    },

    rightTextChoose:{
        fontSize:17,
        color:'#1f60ff',
    },
});